<template>
  <div class="logo">
    <template v-for="(item, key) in type">
      <img
        class="logo-img"
        :class="imgClass"
        :style="imgStyle"
        v-if="item == 'img'"
        src="@/assets/logo.png"
        :key="key"
      />
      <div
        v-if="item == 'text'"
        :class="textClass"
        :style="textStyle"
        v-html="website.name"
        :key="key"
      />
    </template>
  </div>
</template>
<script setup>
import { ref } from "vue";
// 读取环境配置
const AppConfig = window.AppConfig;

defineProps({
  imgClass: {
    type: String,
    default: () => "",
  },
  textClass: {
    type: String,
    default: () => "",
  },
  imgStyle: {
    type: Object,
    default: () => {},
  },
  textStyle: {
    type: Object,
    default: () => {},
  },
  type: {
    type: Array,
    default: () => ["text"],
  },
});

const website = ref({
  name: AppConfig.APP_NAME,
});
</script>

<style scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-img {
  max-width: 100%;
  max-height: 100%;
}
</style>
